<named-slots-parent>
  <named-slots>
    <span slot='header'>
      { state.header }
    </span>

    {state.main}

    <span slot='footer'>
      { state.footer }
    </span>
  </named-slots>

  <script>
    import NamedSlots from './named-slots.riot'

    export default {
      state: {
        header: 'i am the header',
        footer: 'i am the footer',
        main: 'i am the main'
      },
      components: {
        NamedSlots
      }
    }
  </script>
</named-slots-parent>